<template>
  <div :class="className" :style="{ height: hHeight + 'px', width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import world from '@/map/world.json'
echarts.registerMap('world', world)
import resize from './mixins/resize'
import { moneyFormat } from '@/utils/ruoyi'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chartMap'
    },
    width: {
      type: String,
      default: '100%'
    },
    hHeight: {
      type: Number,
      default: 400
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData() {
      this.initChart()
    }
   },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      var data = this.chartData.map(ele => {
        return {
          name: ele.areaName,
          value: ele.amount === null ? 0 : ele.amount,
          areaId: ele.areaId
        }
      })
      var max = -Infinity
      var min = Infinity
      data.forEach(function(itemOpt) {
        if (itemOpt.value > max) {
          max = itemOpt.value
        }
        if (itemOpt.value < min) {
          min = itemOpt.value
        }
      })

      var geoCoordMap = {}
      var mapFeatures = echarts.getMap('world').geoJson.features
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.geometry.encodeOffsets[0]
      })
      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              areaId: data[i].areaId
            })
          }
        }
        return res
      }

      this.chart = echarts.init(this.$el, null)

      this.chart.setOption({
        grid: {
          top: '15%',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          y: 'bottom',
          x: 'right',
          data: ['pm2.5'],
          textStyle: {
            color: '#fff'
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
              if (Number.isNaN(params.value)) {
                return params.name + ' : ' + '0'
              } else {
                return params.name + ' : ' + moneyFormat(params.value)
              }
          }
        },
        visualMap: {
          show: false,
          min: min,
          max: max,
          realtime: false,
          calculable: true,
          color: ['#399EFF', '#27BA81']
        },
        geo: {
          map: 'world',
          show: true,
          roam: true,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#399EFF',
              borderColor: '#399EFF', // 线
              shadowColor: '#092f8f', // 外发光
              shadowBlur: 20
            },
            emphasis: {
              areaColor: '#27BA81' // 悬浮区背景
            }
          }
        },
        series: [
          {
            symbolSize: 5,
            label: {
              normal: {
                formatter: function(params) {
                  return window.i18n.t(params.name)
                },
                position: 'right',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data)
          },
          {
            type: 'map', // 类型
            name: '世界地图',
            mapType: 'world', // 地图类型
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            // 地图区域的多边形 图形样式
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#FFFFFF'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            data: data
          },
          {
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 9
                },
                formatter(value) {
                  return moneyFormat(value.data.value[2])
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#1DE9B6' // 标志颜色
              }
            },
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          },
          {
            //  name: 'Top 3',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 10
                },
                formatter(value) {
                  return moneyFormat(value.data.value[2])
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#1DE9B6' // 标志颜色
              }
            },
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value
                })
                .slice(0, 3)
            ),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
          }
        ]
      })
    }
  }
}
</script>
